<!-- UserList.vue -->
<template>
  <div class="favorites-container">
    <h2 class="favorites-title">我的收藏</h2>
    
    <div class="favorites-content">
      <el-empty v-if="favorites.length === 0" description="暂无收藏内容" />
      
      <div v-else>
        <el-table 
          :data="favorites" 
          style="width: 100%" 
          border
        >
          <el-table-column label="图片" width="120">
            <template #default="scope">
              <img :src="scope.row.recipeImg" class="table-image" />
            </template>
          </el-table-column>
          
          <el-table-column prop="cookbName" label="菜谱名" width="150" />
          
          <el-table-column prop="cuisine" label="菜系" width="100" />
          
          <el-table-column prop="place" label="地方" width="100" />
          
          <el-table-column prop="content" label="内容" min-width="200" show-overflow-tooltip />
          
          <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
              <el-button 
                type="danger" 
                size="small" 
                @click="removeFavorite(scope.row.favoriteId)"
              >
                取消收藏
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="pagination-container" v-if="total > 0">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[5, 10, 20, 50]"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useUserStore } from '@/store/islogin'
import { deleteFavoriteApi, selectFavoriteApi } from '@/api/Favorite'
const useUser = useUserStore()
const userId =ref()
const getuserId =()=>{
  if(useUser.user){
    userId.value=useUser.user.userId
  }else{
    ElMessage.error("请登录！")
  }
}

interface FavoriteItem {
  favoriteId:string
  cookbId: number
  cookbName: string
  cuisine: string
  place: string
  content: string
  recipeImg: string
}

// 分页相关变量
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const favorites = ref<FavoriteItem[]>([])

// 获取收藏列表数据
const fetchFavorites = async () => {
  try {
    if(userId){
      const res = await selectFavoriteApi(userId.value,currentPage.value,pageSize.value)
      if(res.code==200){
        favorites.value=res.data.rows
        total.value=res.data.total
      }
    }
  } catch (error) {
    console.error('获取收藏列表失败:', error)
    ElMessage.error('获取收藏列表失败')
  }
}

// 处理页码改变
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchFavorites()
}

// 处理每页条数改变
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchFavorites()
}

// 取消收藏
const removeFavorite = async (favoriteId: string) => {
  try {
    const res = await deleteFavoriteApi(favoriteId)
    if(res.code==200){
      ElMessage.success('取消收藏成功')
    // 重新获取当前页数据
    fetchFavorites()
    }
  } catch (error) {
    console.error('取消收藏失败:', error)
    ElMessage.error('取消收藏失败')
  }
}

// 初始加载数据
onMounted(() => {
  getuserId()
  fetchFavorites()
})
</script>

<style scoped>
.favorites-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.favorites-title {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.table-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
